<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div id="list">
		<div v-for="value in arr">
			{{value}}
			<a>{{value}} <a> {{value}} </a> </a><br>
		</div>
	</div>
	
	<button onclick="deleteElement()">删除</button>
	<input type="text" id="update"/>
	<button onclick="updateElement()">变更</button>
	
	<button onclick="addElement()">添加</button>
	<script src="../js/table-node-render.js"></script>
	<script>
		//存放组件
		let component={};
		let arr=["item1","item2","item3","item4"]
		let id=document.getElementById('list');
		let allChild=app.getAllChildNodes(id);
		
		
		
		allChild.forEach(node=>{
			const isNode = node instanceof Node;
			if(isNode){
				const hasAttributeMethod = typeof node.getAttribute === "function"
				if(hasAttributeMethod){
					//绑定v-for
					let vfor=node.getAttribute('v-for');
					if(vfor){
						let model=app.bindVforNode(node,vfor);
						component[model.uuid]=model;
					}
				}
			}
		})
		
		function notic(model,target,key,type){
			let nodes=model.childrens;
			let node=model.node;
			let uuid=model.uuid;
			let arrkey=model.key;
			let dataMap={};
			console.log(model);
			if(model.component){
				let components=model.component;
				console.log('开始修改了11111',components.length,target.length);
				if(components.length>target.length){
					let len=components.length-1;
					let len2=target.length-1;
					let n=len;
					for (n; n > len2; n--) {
						let chlds=components[n];
						chlds.forEach(e=>{
							node.removeChild(e);
						})
						console.log('删除了哦')
						components.splice(n, 1);
					}
				}
				let i=0;
				target.forEach(e=>{
					dataMap[arrkey]=e;
					if(components[i]){
						let chmods=components[i];
						chmods.forEach(n=>{
							const isDOMNode = n instanceof Node;
							if(isDOMNode){
								const hasGetAttributeMethod = typeof n.getAttribute === "function"
								if(hasGetAttributeMethod){
									let str=n.getAttribute("data-reserve");
									str=app.replacePlaceholders(str,dataMap);
									n.innerText=str;
								}
							}
						})
					}else{
						let dataArr=[];
						nodes.forEach(n=>{
							let newNode=app.deepCloneNode(n);
							if(newNode){
								const isDOMNode = newNode instanceof Node;
								if(isDOMNode){
									const hasGetAttributeMethod = typeof newNode.getAttribute === "function"
									if(hasGetAttributeMethod){
										let text=newNode.innerText;
										newNode.setAttribute("data-reserve",text);
										newNode.setAttribute("data-index",i);
										let str=app.replacePlaceholders(text,dataMap);
										newNode.innerText=str;
										node.appendChild(newNode);
										dataArr.push(newNode);
									}
								}
							}
						})
						components[i]=dataArr;
					}
					i++;
				})
				model.component=components;
			}else{
				app.removeChildNodes(node);
				let component=[];
				let i=0;
				target.forEach(e=>{
					dataMap[arrkey]=e;
					let dataArr=[];
					nodes.forEach(n=>{
						let newNode=app.deepCloneNode(n);
						if(newNode){
							const isDOMNode = newNode instanceof Node;
							if(isDOMNode){
								const hasGetAttributeMethod = typeof newNode.getAttribute === "function"
								if(hasGetAttributeMethod){
									let text=newNode.innerText;
									newNode.setAttribute("data-reserve",text);
									newNode.setAttribute("data-index",i);
									let str=app.replacePlaceholders(text,dataMap);
									newNode.innerText=str;
									node.appendChild(newNode);
									dataArr.push(newNode);
								}
							}
						}
					})
					component[i]=dataArr;
					i++;
				})
				model.component=component;
			}
		}
		
		let proxyArray;
		
		for(key in component){
			let model=component[key];
			//创建代理
			proxyArray=app.getProxyArray(notic,key,arr,model);
		}
		
		
		function deleteElement(){
			console.log('删除了')
			proxyArray.splice(0,1);
		}
		
		function updateElement(){
			let v=document.getElementById('update').value;
			proxyArray[0]=v;
		}
		
		function addElement(){
			let v=document.getElementById('update').value;
			proxyArray.push(v);
		}
		
	
		
	
		
		
		
		
	</script>
	</body>
</html>